<template> 
    <div class="collect-page clear-both"> 
        <div  class="head-tab">
            <zan-tab
            :scroll="scroll"
            :list="tabList"
            :selected-id="selectedId" 
            @tabchange="handleTabChange"
            />
            <div class=""></div>
        </div>  
        
        <!--视频-->
        <div v-if="selectedId==1||selectedId==2">
            <vid-page  :prop="vidList"></vid-page> 
        </div> 
        
        <div  v-if="selectedId==3">
            <art-list v-for="(item,index) in  vidList" :key="index" :item="item.articleInfo" @shoucang="shoucang"  @jumpDetail="jumpDetail"></art-list>
        </div> 
  
         <!--穴位 -->
        <div  v-if="selectedId==4" style="padding:20rpx; box-sizing:border-box;">
             <c-art-list @jump="xWDetail" v-for="(item,index) in msgList" :key="index" :title="item.title" :item="item" :time="item.create_time_txt" :records="item.records" :collects="item.collects"></c-art-list> 
        </div>
        <!--药方-->
        <div  v-if="selectedId==6" style="padding:20rpx; box-sizing:border-box;">
             <!--<c-art-list @jump="bFDetail" v-for="(item,index) in yaoFangList" :key="index" :title="item.content_simple" :item="item" :time="item.create_time_txt" :records="item.records" :collects="item.collects" :imgUrl="item.thumb"></c-art-list> -->
             <wen-zhang @jump="bFDetail" v-for="(item,index) in yaoFangList" :key="index" :item="item"></wen-zhang> 
        </div>
        
        <div  v-if="selectedId==7">
            <paste-list @jump="jumpCardDetail" @optBtn="optBtn" v-for="(item,index) in stateList" :key="index" :item="item"></paste-list>  
        </div>
         <!--功法-->
        <div  v-if="selectedId==8" style="padding:20rpx; box-sizing:border-box;">
             <c-art-list @jump="gFDetail" v-for="(item,index) in gongfaList" :key="index" :title="item.tilte_content" :item="item" :time="item.create_time_txt" :records="item.records" :collects="item.collects" :imgUrl="item.thumb"></c-art-list> 
        </div>
        <zan-loadmore type="text"></zan-loadmore>
    </div> 
</template>

<script>
import wenZhang from '@/components/tpl/wen-zhang' 
import pasteList from '@/components/tpl/paste-list' 
import artList from '@/components/tpl/art-list' 
import cArtList from '@/components/tpl/collect-art-list'
import vidPage from '@/components/vid-page'  
import * as api from '@/utils/api' 
export default { 
    onLoad(){
        this.selectedId=1;
        this.getCollectList(1,'Records','audioInfo');
    },
    data () {
        return {
            tabList:[{
                id: '1',
                title: '音频'
            },{
                id: '2',
                title: '视频'
            },{
                id: '3',
                title: '文章'
            },{
                id: '4',
                title: '穴位'
            },{
                id: '6',
                title: '药方'
            },{
                id: '7',
                title: '帖子'
            },{
                id: '8',
                title: '功法'
            }],
            selectedId: '1',
            scroll:false,  
            
            vidList:[], //视频列表 
            stateList:[],  //帖子列表
            msgList:[],  //穴位
            yaoFangList:[],  //药方
            gongfaList:[],//功法
            offset:0,
            limit:10,
            count:0,  //总条数
        }
    },
    methods:{
        //跳转详情
        jumpDetail(item){
            let url = `./../article-detail/main?artId=${item.article_id}&title=${item.title}`;
            wx.navigateTo({url}) 
        },
        //跳转详情
        xueweiDetail(item){
            console.log(item);
            let url = `./../acupoint-item-detail/main?typeId=${item.id}&title=${item.title}`;
            wx.navigateTo({url}) 
        },
        //跳转帖子详情
        jumpCardDetail(item){ 
            let url=''; 
            url= `./../card-detail/main?forumId=${item.forum_id}`; 
            wx.navigateTo({url})  
        },
        //穴位跳转详情
        xWDetail(item){
            let url = `./../acupoint-item-detail/main?typeId=${item.d_id}`;
            wx.navigateTo({url}) 
        },
        //百方详情
        bFDetail(item){
            let url = `./../article-detail/main?artId=${item.article_id}&title=${item.title}`;
            wx.navigateTo({url}) 
        },
        //功法详情
        gFDetail(item){
            let url;
            console.log(item);
            if(item.category==2){ 
                url = `./../video-detail/main?vidId=${item.id}&tab_id=${item.tab_id}`;  
            }else{
                url = `./../article-detail/main?artId=${item.article_id}&title=${item.title}`;
            }
            wx.navigateTo({url})
        },
        //获得收藏列表
        getCollectList(id,model,withVal){
            let vm =this;
            let body={
                model:model,
                
                condition:{
                    resource_type:id,
                    type:1,
                    uid:wx.getStorageSync('u_id')
                },
                offset:vm.offset,
                limit:vm.limit
            }; 
            if(withVal){
                body.with={ 
                    "0":withVal 
                }
            }
            api.commonSite(body).then(res=>{  
                if(res.data.code==200){    
                    if(withVal=='articleInfo'){
                        vm.vidList=res.data.data.data; 
                        vm.vidList.forEach((item,index)=>{ 
                            item.articleInfo.create_time_txt=item.articleInfo.create_time.split(' ')[0];
                        }); 
                        if(vm.selectedId==6){
                            let yArr=[];
                            vm.vidList.forEach((item,index)=>{  
                                yArr.push(item.articleInfo);
                            }); 
                            vm.yaoFangList=yArr;
                        }else{
                            vm.yaoFangList=[];
                        }
                    }else if(withVal=='audioInfo'){  
                        let audioArr=[];
                        res.data.data.data.forEach((item,index)=>{
                            item.audioInfo.create_time_txt=item.audioInfo.create_time.split(' ')[0];
                            audioArr.push(item.audioInfo); 
                        }); 
                        vm.vidList=audioArr;
                    }else if(withVal=='forumsInfo'){  
                        let forumsArr=[];
                        res.data.data.data.forEach((item,index)=>{ 
                            let obj={
                                title:''
                            };
                            item.forumsInfo.create_time_txt=item.forumsInfo.create_time.split(' ')[0];
                            obj.title=item.forumsInfo.title;
                            item.forumsInfo.topics=obj; 
                            forumsArr.push(item.forumsInfo); 
                        }); 
                        vm.stateList=forumsArr;
                        console.log(stateList);
                    }else if(withVal=='pointInfo'){  
                        let pointArr=[]; 
                        res.data.data.data.forEach((item,index)=>{
                            item.pointInfo.d_id=item.id;
                            item.pointInfo.create_time_txt=item.pointInfo.create_time.split(' ')[0];
                            pointArr.push(item.pointInfo);  
                        }); 
                        vm.msgList=pointArr;   
                    }else if(withVal==''){  
                        let gfArr=[]; 
                        res.data.data.data.forEach((item,index)=>{
                            item.gf_info.resource_type=item.resource_type;
                            item.gf_info.category=item.category;
                            item.category==2?item.gf_info.tilte_content=item.gf_info.title:item.gf_info.tilte_content=item.gf_info.title;
                            item.gf_info.create_time_txt=item.gf_info.create_time.split(' ')[0];
                            gfArr.push(item.gf_info);  
                        }); 
                        vm.gongfaList=gfArr;   
                    }    
                }   
            });
        },
        optBtn(val,item){
            let vm = this;
            if(val=="collect"){ 
                let body={
                    model: "Records",
                    data:{
                        uid: wx.getStorageSync('u_id'),      
                        resource_id: item.topics.id,   
                        type:1,        
                        resource_type:7,   
                        category:"1" 
                    } 
                }; 
                if(item.is_collect==1){
                    api.deleteData(body).then(res=>{
                        if(res.data.code==200){
                            vm.getList();
                            wx.showToast({icon:'none', title: '取消成功' })
                        }
                    });
                }else{
                    api.createSite(body).then(res=>{
                        if(res.data.code==200){
                            vm.getList();
                            wx.showToast({icon:'none', title: '收藏成功' })
                        }
                    });
                }
            }
        },
        handleTabChange(e) {   
            this.selectedId=e.mp.detail;
            if(this.selectedId==1){ //音频
                this.getCollectList(e.mp.detail,'Records','audioInfo');
            }else if(this.selectedId==2){//视频
                this.getCollectList(e.mp.detail,'Records','audioInfo');
            }else if(this.selectedId==3){//文章
                this.getCollectList(0,'Records','articleInfo');
            }else if(this.selectedId==4){//穴位
                this.getCollectList(6,'Records','pointInfo');
            }else if(this.selectedId==6){//药方
                this.getCollectList(4,'Records','articleInfo');
            }else if(this.selectedId==7){//帖子
                this.getCollectList(e.mp.detail,'Records','forumsInfo');
            }else if(this.selectedId==8){//功法
                this.getCollectList(3,'Records','');
            }  
        }
    },
    components: {
        pasteList,
        vidPage,
        artList,
        wenZhang,
        cArtList
    },
}
</script>

<style scoped lang="scss">
.collect-page{ 
    width:100%;
    padding-top:90rpx;
   .head-tab{
        position:fixed;
        top:0;
        width:100%;
        height:90rpx;
        background:#fff; 
        z-index:20;
    } 
    
}
</style>
